<template>
  <div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="number" class="weui-search-bar__input" id="searchInput"
         :placeholder="searchPlaceHolder" v-model.trim="searchText" @keydown.enter="search">
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText">
        <i class="weui-icon-search"></i>
        <span>搜索</span>
      </label>
    </form>
    <a class="weui-search-bar__cancel-btn"
     id="searchCancel">取消</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  props: {
    searchPlaceHolder: {
      type: String,
      default: '邀请码'
    }
  },
  mounted() {
  },
  methods: {
    search(event) {
      event.preventDefault()
      this.$emit('search', this.searchText)
    }
  },
  computed: {
  },
  components: {
  }
}

</script>

<style lang="less">
  #searchBar {
    background-color: #1e47ad;
  }
  #searchCancel {
    color: #fff;
  }
  .weui-search-bar__form {
    border-radius: 10px;
  }
</style>